<!--
* @author: Jay
* @description: 动态修改主题色
* @createTime: 2022-12-12 14:55:31
 -->
<template>
	<view class="conter" :style="{'--page-bg':pageBg}">
		<view class="padding margin-bottom-xl css-theme" :class="[cueTheme]">
			<view class="text-lg text-center text-bold">
				暗黑模式
			</view>
			<view class="margin-top-sm" @click="openDoc">
				uni-app的暗黑模式。<text class="text-blue">点击查看官方文档</text>
			</view>
		</view>

		<view class="css-theme padding" :class="[cueTheme]">
			<view class="text-center text-bold text-lg">
				通过判断css 名字修改主题!!!
			</view>
			<view class="margin-tb-sm text-lg text-center">
				当前主题:{{cueTheme}}
			</view>
			<view class="margin-tb-sm text-lg text-center">
				当前页面背景色:{{pageBg}}
			</view>
			<view class="flex align-center justify-around">
				<button class="cu-btn round" @click="cssEditThemeBut('day-theme')">白天</button>
				<button class="cu-btn round" @click="cssEditThemeBut('night-theme')">黑夜</button>
				<button class="cu-btn round" @click="cssEditThemeBut('jade-theme')">玉红</button>
			</view>
		</view>

		<view class="padding margin-top-xl" :data-theme="cueTheme">
			<view class="text-center text-bold text-lg">
				通过 data-theme 判断 名字修改主题!!!
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode'
			};
		},
		onLoad() {
			console.log("当前主题:", this.cueTheme);
		},
		onShow() {},
		methods: {
			cssEditThemeBut(e) {
				//修改主题
				this.cueGetTheme(e)
				//设置主题缓存
				this.themeCache(e)
				//设置 全局背景色
				this.getSystemBg()
				// js自改变量值  h5 可用
				// document.getElementsByTagName('body')[0].style.setProperty('--page-bg', 'red');
			},
			openDoc() {
				// #ifdef APP
				plus.runtime.openWeb(this.url);
				// #endif
				// #ifdef H5
				let a = document.createElement('a');
				a.href = this.url;
				a.target = '__blank';
				a.click();
				a = null;
				// #endif
			}
		}
	}
</script>
<style>
	/* 全局背景色 */
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	// 全局背景色
	.conter {
		height: 100%;
		background-color: $page-bg;
	}

	.css-theme {
		// border: 2px solid;
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}
</style>
